<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="../plugin/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <script src="../plugin/echarts/echarts.js"></script>
    <link href="../plugin/sweetalert-6.6.2/sweetalert2.min.css" rel="stylesheet"/>

    <script src="../plugin/jquery-3.2.1/jquery-3.2.1.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <script src="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../plugin/soul/utils3.js"></script>

    <script src="../plugin/jquery-3.2.1/jquery-3.2.1.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/plugin/file_input/fileinput.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/plugin/file_input/local_zh.js"></script>
    <script src="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.min.js"></script>
    <script src="../plugin/bootstrap-3.3.7/plugin/datatimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../plugin/bootstrap-table-1.11.1/bootstrap-table.min.js"></script>
    <script src="../plugin/bootstrap-table-1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="../plugin/sweetalert-6.6.2/sweetalert2.min.js"></script>
    <script src="../plugin/jquery-3.2.1/jquery.formautofill.min.js"></script>
    <script src="../plugin/jquery-zoomify/zoomify.min.js"></script>
    <script src="../plugin/jquery-3.2.1/jquery.serializejson.js"></script>
    <script src="../plugin/soul/utils3.js"></script>
    <script src='../base/base.js'></script>


</head>

<body>


<div style="padding:20px 0;margin-left:20px;display: flex;flex-direction: row;">
    <div class="input-group" style="width: 240px">
        <span class="input-group-addon">开始时间</span>
        <input class="form-control form_datetime" id="startTime">
    </div>
    <span style="line-height: 30px;">&nbsp;一一&nbsp;</span>
    <div class="input-group" style="width: 240px">
        <span class="input-group-addon">结束时间</span>
        <input class="form-control form_datetime" id="endTime" data-date-format="yyyy-mm-dd">
    </div>
    &nbsp;<button type="button" id="search" class="btn btn-success">搜索</button>
</div>
<div id="main" style="height: 300px"></div>
<script type="text/javascript">
    //日期插件
    var nowTime = Date.parse(new Date());
    var oldTime = nowTime - 24 * 60 * 60 * 1000 * 10;

    $('#startTime').val(FormatUtil.formatDate(new Date(oldTime)));
    $('#endTime').val(FormatUtil.formatDate(new Date()));

    var myChart = echarts.init(document.getElementById('main'));

    var timedata = [];
    var totalEmail = [];
    var domesticEmail = [];
    var foreignEmail = [];
    var startVal = "";
    var endVal = "";
    $(function () {
        reflash();
    });

    function reflash() {
        $.ajax({
            type: "get",
            url: '/report/user?beginDate=' + startVal + '&endDate=' + endVal + '&token=' + BaseConfig.token,
            success: function (res) {
                if (res.code == 200) {

                    timedata = res.obj.data;
                    console.log(res.obj.reportVoList);

                    for (var i = 0; i < res.obj.reportVoList.length; i++) {
                        totalEmail.push(res.obj.reportVoList[i].totalEmail);
                        domesticEmail.push(res.obj.reportVoList[i].domesticEmail);
                        foreignEmail.push(res.obj.reportVoList[i].foreignEmail);
                    }
                    report(timedata, totalEmail, domesticEmail, foreignEmail);
                }
            },
            error: function (res) {
                SwalUtil.error('请求失败!');
            }
        });
    }

    $(".form_datetime").datetimepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd', //显示格式
        todayHighlight: 1, //今天高亮
        minView: "month", //设置只显示到月份
        startView: 2,
        forceParse: 0,
        showMeridian: 1,
        autoclose: 1 //选择后自动关闭
    });

    $('#search').click(function () {
        startVal = $('#startTime').val();
        endVal = $('#endTime').val();

        var s = Date.parse(new Date(startVal));
        var e = Date.parse(new Date(endVal));

        if (startVal == "" || endVal == "") {
            SwalUtil.error('时间皆不能为空');
        }
        else if (s >= e) {
            SwalUtil.error('开始时间不能大于等于结束时间');
        } else {
            totalEmail = [];
            domesticEmail = [];
            foreignEmail = [];
            reflash();
        }

    });

    function report(timedata, totalEmail, domesticEmail, foreignEmail) {
        option = {
            title: {
                text: '新增人数统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['国内人数', '国外人数', '总人数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: timedata
            },
            yAxis: {
                type: 'verify'
            },
            series: [{
                name: '国内人数',
                type: 'line',
                stack: '总量',
                data: domesticEmail
            },
                {
                    name: '国外人数',
                    type: 'line',
                    stack: '总量',
                    data: foreignEmail
                }, {
                    name: '总人数',
                    type: 'line',
                    stack: '总量',
                    data: totalEmail
                },
            ]
        };
        myChart.setOption(option);

    }


</script>
</body>

</html>